<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <script src="./js/tools.js"></script>
    <script src="./js/api_v1.js"></script>
    <script src="./js/swiperValidate.js"></script>
    <script src="./js/cookie.js"></script>
    <style>
        .body {
            height: 600px;
            background: url(./images/banner.jpg) no-repeat center/auto 600px;
            background-size: auto 600px;
            border-top: 1px solid ;
        }
        .body > .content > .login {
            position: relative;
            width: 350px;
            height: 360px;
            /* border: 1px solid red; */
            margin-top: 82px;
            left: 65%;
            background-color: #fff;
        }
        .login > p {
            color: black;
            font-size: 14px;
            /* margin-top: 25px; */
            padding: 20px;
            margin-left: 25px;
        }
        .login > .login-active {
            display: flex;
            position: relative;
            align-items: center;
            width: 300px;
            border: 1px solid #6666;
            margin: 0 auto;
            box-sizing: border-box;
            margin-top: 16px;
        }
        .login > .login-active > span {
            position: absolute;
            font-size: 12px;
            color: red;
            top: 40px;
            display: none;
        }
        .login > .login-active > .active {
            display: block;
        }
        .login input {
            border: 1px solid transparent;
            box-sizing: border-box;
            height: 40px;
            width: 260px;
        }
        .login > .login-active > i {
            background-color: rgba(243,243,243,0.9);
            background-repeat: no-repeat;
            background-size: 20px 20px;
            background-position: center;
            width: 40px;
            height: 40px;
        }
        .login > div:nth-of-type(1) > i {
            background-image: url(./images/zhuceyonghu.png);
        }
        .login > div:nth-of-type(2) > i {
            background-image: url(./images/dengluzhucemima.png);
        }
        .login > .login-check {
            margin-left: 25px;
            margin-top: 20px;
        }
        .login > .login-check > span {
            font-size: 12px;
            vertical-align: middle;
        }
        .login > .login-login {
            width: 300px;
            margin: 0 auto;
            margin-top: 20px;
        }
        .login > .login-login > button {
            display: block;
            font-size: 16px;
            color: whitesmoke;
            box-sizing: border-box;
            margin: 0 auto;
            width: 290px;
            height: 40px;
            border: 1px solid rgb(0, 186, 214);
            border-radius: 5px;
            background-color: rgb(0, 186, 214);
        }
        .login > .login-pwd2 {
            margin: 0 auto;
            margin-top: 20px;
            width: 300px;
            display: flex;
            justify-content: space-between;
        }
        .login > .login-pwd2 > input {
            width: 90px;
            border: 1px solid #ccc;
        }
        .login > .login-pwd2 > div {
            width: 130px;
            text-align: center;
            line-height: 30px;
            border: 5px solid #ccc;
            box-sizing: border-box;
        }
        .login > .login-pwd2 > a img {
            width: 35px;
            height: 35px;
        }
    </style>
</head>
<body>
    <div class="head-container">

    </div>
    <div class="body">
        <div class="content">
            <div class="login">
                <p>用户登录</p>
                <div class="login-tel login-active">
                    <i></i><input type="text" placeholder="手机号" value="" id="tel">
                </div>
                
                <div class="login-pwd1 login-active">
                    <i></i><input type="password" placeholder="填写密码" id="pwd">
                </div>
                
                <div class="login-pwd2">
                    <input type="password" placeholder="填写验证码" id="veriCode"><div>1324</div><a href="javascript:;"><img src="./images/refresh.png" alt=""></a>
                </div>
               
                <div class="login-check">
                    <span>&nbsp;&nbsp;没有账号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="./register.html">点我注册</a>&nbsp;&nbsp;&nbsp;&nbsp;忘记账号密码?&nbsp;&nbsp;&nbsp;<a href="">点击找回</a></span>
                </div>
                <div class="login-login">
                    <button>&nbsp;登&nbsp;&nbsp;录&nbsp;</button>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-container">
    </div>
</body>
<script>
    async function reLoadHeader(){
        let headContent = $(".head-container");
        const res = await loadHeader({});
        headContent.innerHTML = res ; 
    } 
    reLoadHeader();
</script>
<script>
    async function reLoadFooter(){
        const res = await loadFooter({});
        let footContent = $(".footer-container");
        footContent.innerHTML = res;
        let weiboEles = document.querySelectorAll(".weibo");
        weiboEles.forEach(( item , key )=>{
            item.onmouseenter = function (){
                let x = this.offsetWidth ; 
                let y = this.offsetHeight ; 
                let divEle = document.createElement("div");
                divEle.style.position = "absolute" ;
                divEle.style.width = x + "px" ;
                divEle.style.height = x + "px" ;
                divEle.style.top = - x + "px" ; 
                if( key == 0 ){
                    divEle.style.backgroundImage = "url(./images/weibo.jpg)" ;
                } else if ( key == 1 ){
                    divEle.style.backgroundImage = "url(./images/weixin.jpg)" ;
                }
                divEle.style.backgroundSize = `${x}px ${x}px` ; 
                item.appendChild(divEle);
            }
            item.onmouseleave = function (){
                let divEle = this.querySelector("div");
                divEle.remove();
            }
        });
    } 
    reLoadFooter();
</script>
<script>
    let codeEle = document.querySelector("#veriCode");
    codeEle.nextElementSibling.innerHTML = getRandChar(); 
    let telEle = document.querySelector("#tel");
    let pwdEle = document.querySelector("#pwd");
    let loginEle = document.querySelector(".login > .login-login");
    codeEle.nextElementSibling.nextElementSibling.onclick = function (){
        this.previousElementSibling.innerHTML = getRandChar() ; 
    }
    loginEle.onclick = async function (){
        let str = codeEle.value ;
        let str1 = codeEle.nextElementSibling.innerHTML.trim();
        let tel = telEle.value ; 
        let pwd = pwdEle.value ; 
        if( str !== str1){
            alert("验证码错误！");
        } else {
            const res = await login({ tel , pwd });
            console.log(res);
            if( res['status'] == 1 ){
                setCookie("id",res['data']['id']);
                setCookie("ulevel",res['data']['ulevel']);
                setCookie("tel",res['data']['tel']);
                // console.log(document.cookie);
                if( res['data']['ulevel'] == 3 ){
                    window.location.href = './index.html' ;
                } else if( res['data']['ulevel'] > 3 ) {
                    window.location.href = './html/admin/index.html?opId=1' ;
                }
            } else {
                alert(res['info']);
            }
        }
    }
    function getRandChar(){
        let str = '' ;
        for( let i = 0 ; i < 5 ; i ++ ){
            str += String.fromCharCode(getRand(97,122)) ;
        }
        return str ; 
    }
</script>

</html>